<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        /*  对带有指定属性的html 元素设置样式 */
        [title]
        {
            color: red;
        }

        [title=w3school]   /* 除了红色 还有 为 title="w3school" 的所有元素设置了样式边框*/
        {
            border: 5px solid blue;
        }

        [title~=hello]  /* 包含指定值的 title 属性的所有元素设置样式  这里为title只中包含 hello  */
        {
            background-color: #8235bd;
        }  /* 这种多重设置的效果会叠加 */

        [lang|=en]  /* 为带有指定值的lang属性的所有元素设置样式 要注意 html 中的lang 属性也在列*/
        {
            color: blue;
        }

        /* 设置表单的样式 属性选择器在为 不带有id 或者 class 的表单设置样式时特别有用: */
        input[type="text"]
        {
            width: 150px;
            display: block;
            margin-bottom: 10px;
            background-color: yellow;
            font-family: Verdana,Arial;
        }

        input[type="button"]
        {
            width: 120px;
            margin-left: 35px;
            display: block;
            font-family: Verdana,Arial;
        }

        /*
         [attribute]	用于选取带有指定属性的元素。
         [attribute=value]	用于选取带有指定属性和值的元素。
         [attribute~=value]	用于选取属性值中包含指定词汇的元素。
         [attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
         [attribute^=value]	匹配属性值以指定值开头的每个元素。
         [attribute$=value]	匹配属性值以指定值结尾的每个元素。
         [attribute*=value]	匹配属性值中包含指定值的每个元素。
        */
    </style>
</head>
<body>
    <h1>可以应用样式:</h1>
    <!--  对带有指定属性的 html 元素设置样式 -->
    <h2 title="hello world">Hello World</h2>
    <a title="w3school" href="www.baidu.com">baidu.com</a>
    <a title="de long hello" href="www.google.com">google.com</a>
    <hr/>
    <h1>无法应用样式: </h1>
    <h2>Hello World</h2>
    <a href="http://www.sina.com">sina.com</a>
    <hr/>
    <p lang="en">en hello</p>
    <p lang="en-us"> Hi! Jack</p>
    <h1>无法应用样式: </h1>
    <p lang="us">Hi!</p>
    <p lang="zh">Hao !</p>
    <hr/>
    <form name="input" action="" method="get">
        <input type="text" name="Name" value="Bill" size="20">
        <input type="text" name="Name" value="Gates" size="20">
        <input type="button" value="Example Button">
    </form>
</body>
</html>











































